<template>
	<view class="content font_family">
		<view class="title">
			<text>可用优惠券</text>
			<text class="num">{{list.length}}张</text>
		</view>
		<view class="item" v-for="(item,index) in list" :key="index" @click="gx(index,item)">
			<view class="tag">满减券</view>
			<view class="top f_z_b">
				<view class="left f_d f_z_b">
					<view class="q_title">
						{{item.coupon.title}}
					</view>
					<view class="time">
						有效期{{item.coupon.draw_range}}
					</view>
				</view>
				<view class="right f_j">
					<view class="price f_d f_j">
						<view class="num">
							<text style="font-size: 26rpx;">￥</text>
							<text>{{item.coupon.used_amount}}</text>
						</view>
						<view class="tip">
							满{{item.coupon.with_amount}}元可用
						</view>
					</view>
					<image class="gx" src="../../static/public/gx.png" mode="" v-if="gx_index===index"></image>
					<image class="gx" src="../../static/public/no_gx.png" mode="" v-else></image>
				</view>
			</view>
			<view class="bottom">
				{{item.coupon.remarks}}
			</view>
		</view>
		<view class="btn_box">
			<view class="zw" :style="{height:zw_height+'px'}">

			</view>
			<view class="gd_box f_j safe_bottom">
				<view class="yj" v-if="gx_index!==''">
					<text>已选1张，</text> 可减 <text style="color: #FF6554;">￥</text><text
						style="font-size: 44rpx;color: #FF6554">{{kj}}</text>
				</view>
				<view class="qd_btn" @click="sub">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import { create, pay, get_openid, usable } from '@/api/user.js'
	export default {
		data() {
			return {
				zw_height: 0,
				gx_index: '',
				list: [],
				kj: 0, //可减金额
				use_item: ''
			}
		},
		onReady() {
			this.$u.getRect('.gd_box').then(res => {
				// console.log(res);
				this.zw_height = res.height
			})
		},
		onLoad(e) {
			this.list = JSON.parse(e.list)
			console.log(this.list)
		},
		methods: {
			...mapMutations(['set_yhq_msg']),
			gx(index, item) {
				this.use_item = item
				this.gx_index = index
				this.kj = item.coupon.used_amount
			},
			sub() {
				if (!this.use_item) {
					uni.showToast({
						icon: 'none',
						title: '请选择您要使用的优惠券'
					})
					return
				}
				// 提交vuex选择的优惠券信息
				this.set_yhq_msg(this.use_item)
				this.back()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.title {
			font-weight: 600;
			font-size: 34rpx;
			color: #111111;

			.num {
				margin-left: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #6C6C6C;
			}
		}

		.item {
			position: relative;
			margin-top: 30rpx;
			padding: 30rpx;
			padding-top: 50rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.tag {
				position: absolute;
				top: 0;
				left: 0;
				background: #FE654D;
				border-radius: 24rpx 0rpx 24rpx 0rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFE9E6;
				padding: 7rpx 23rpx;
			}

			.top {
				padding-bottom: 23rpx;
				border-bottom: 2rpx dashed #D2D2D2;

				.left {
					.q_title {
						font-weight: 600;
						font-size: 34rpx;
						color: #111111;
					}

					.time {
						font-weight: 400;
						font-size: 24rpx;
						color: #585858;
					}
				}

				.right {
					.price {
						.num {
							font-weight: 400;
							font-size: 40rpx;
							color: #FF6554;
						}

						.tip {
							font-weight: 400;
							font-size: 24rpx;
							color: #F4705D;
						}
					}

					.gx {
						width: 38rpx;
						height: 38rpx;
						margin-left: 20rpx;
					}
				}
			}

			.bottom {
				margin-top: 30rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #959595;
			}
		}

		.btn_box {
			.gd_box {
				justify-content: flex-end;
				box-sizing: border-box;
				padding: 10rpx 30rpx;
				width: 100%;
				position: fixed;
				bottom: 0rpx;
				left: 0rpx;
				background: #FFFFFF;
				box-shadow: 0rpx -4rpx 15rpx 3rpx rgba(220, 220, 220, 0.5);

				.qd_btn {
					margin-left: 30rpx;
					padding: 22rpx 60rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;
					background: #FE654D;
					border-radius: 40rpx;
				}
			}
		}
	}
</style>